<template>
  <div>
    Filters<br>
    {{myValue | capitalize | capitalize1}}1
    <!--    {{test1234}}-->
    {{student}}
    <button type="text" @keyup.v="myConsole">button</button>
    <button @click="addProperty">add property</button>
    {{num}}
  </div>
</template>

<script>

  export default {
    name: "Filters",
    model: {},
    props: {},
    data() {
      return {
        myValue: '    hg     ',
        num: 10,
        student: {
          name: 'hg',
          age: 10
        }
      }
    },
    computed: {},
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined
      console.log("%c%s", "color:red","message: " + this.message)
      // showLoadingInterceptor(request,this.loadingStart,this.loadingEnd)
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
      console.log(window.navigator)

    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message)
    },
    methods: {
      myConsole() {
        console.error('test')
      },
      addProperty() {
        // this.set(this.student,'like','rap')
        this.num++
        this.$nextTick(function () {
          console.log('in')
        })
        console.log(123)
        // this.num++
      }
    },
    // mounted() {
    //   this.$set(this.student, 'like', 'rap')
    //   console.log(123)
    // },
    // updated() {
    //   this.$delete(this.student, 'like')
    // }
  }
</script>

<style scoped>

</style>
